<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="jquery-3.1.1.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #ccc;
        }
        
        #bg1 {
            width: 370px;
            height: 510px;
            margin: 0 auto;
            position: relative;
            background-color: #fff;
        }
        
        #outd {
            width: 360px;
            height: 500px;
            padding: 5px;
            margin: 0 auto;
            background-color: #FCA921;
            display: none;
            /*position: relative;*/
        }
        
        #ind {
            width: 350px;
            height: 490px;
            /*border: 5px solid red;*/
            padding: 5px;
            margin: 5px auto;
            background-color: #fff;
            position: absolute;
            top: 0px;
            left: 5px;
            /*opacity: 1;*/
        }
        
        img {
            width: 100%;
        }
        
        p {
            width: 310px;
            padding: 20px;
            margin-top: -5px;
            font-size: 12px;
            /*border: 1px solid red;*/
        }
        section{
            width: 430px;
            margin: 20px auto;
            padding: 10px;
            background-color: #fff;
            display: flex;
            justify-content: space-between;
        }
        #imgs{
            width: 200px;
            height: 200px;
            /*border: 1px solid red;*/
            
        }
        #yus{
            width: 200px;
            position: relative;
        }
        .meng{
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            background-color: #000;
            overflow: hidden;
            opacity: 0.1;
            display: none;
            /*border: 1px solid red;*/
            

        }
        h3{
            margin: 5px; 
            margin-top: 20px;
            padding-left: 15px;
            width: 15px;
        }
        .meng p{
            margin: 0;
            margin-top: 50px;
            padding: 0;
            padding-left: 20px;
            font-size: 16px;
            color: #fff;
            width: 150px;
            /*height: 50px;*/
            position: absolute;
            left:-180px;
        }
        #yus{

        }
    </style>
</head>

<body>
    <div id="bg1">
        <div id="outd"></div>

        <div id="ind">

            <img src="img/大雪.png" alt="">
            <p>“大雪”是农历二十四节气中的第21个节气，更是冬季的第三个节气，标志着仲冬时节的正式开始；其时视太阳到达黄经255度。《月令七十二候集解》说：“大雪，十一月节，至此而雪盛也。”大雪的意思是天气更冷，降雪的可能性比小雪时更大了，并不指降雪量一定很大。</p>
        </div>
    </div>
    <section>
        <div id="yus">
            <div id="imgs">
                <img src="img/雨水.png" alt="">
            </div>
            <div class="meng">
                <p>雨水</p>
                <p>雨水，是二十四节气之中的第2个节气</p>
            </div>
        </div>
        <div id="yus">
            <div id="imgs">
                <img src="img/立夏.png" alt="">
            </div>
            <div class="meng">
                <p>立夏</p>
                <p>立夏是农历二十四节气中的第7个节气，夏季的第一个节气。</p>
            </div>
        </div>
    </section>



</body>

</html>
<script>
    $('#ind').hover(function () {
        console.log(12)
        $('#outd').fadeToggle()
    }, function () {
        $('#outd').fadeOut()
    })
    // if($('section .meng').css('display','none')){
    //     $('section #imgs').mouseenter(function(){
    //         console.log(12)
    //         $(this).next().fadeTo(500,0.5);
    //         $(this).next().find('p').animate({
    //             left:0,
    //         },200);
    //     })
    // }else{
    //     $('section .meng').mouseenter(function(){
    //         console.log(555)     
    //         $(this).fadeTo(500,0)
    //         $(this).find('p').animate({
    //             left:-100
    //         },200)
    //      })
    // }


   
        $('section #yus').mouseenter(function(){
            console.log(12)
            console.log($('section .meng').css('display'))
            $(this).find('.meng').fadeTo(200,0.5);
            $(this).find('.meng').find('p').animate({
                left:0,
            },200);
        })
    
        // $('section .meng').mouseenter(function(){
        //     console.log(555)     
        //     $(this).fadeTo(500,0)
        //     $(this).find('p').animate({
        //         left:-100
        //     },200)
        //  })
 
    
   
    $('section #yus').mouseleave(function(){
        console.log(12)     
        $(this).find('.meng').fadeTo(200,0)
        $(this).find('.meng').find('p').animate({
            left:-180
        },200)
        console.log($('section .meng').css('display'))
    })

</script>